<template>
    <el-dialog class="mod-config" :visible.sync="dialogVisible" title="药材召回" :close-on-click-modal="false">
        <el-form :inline="true" :model="dataForm" ref="dataFormRef" @keyup.enter.native="getDataList()">
                    <el-form-item>
                        <el-input v-model="dataForm.zhaoHuiBiaoTi" placeholder="召回标题" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="dataForm.neiRong" placeholder="内容" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="dataForm.laiYuan" placeholder="来源" clearable></el-input>
                    </el-form-item>
            <el-form-item>
                <el-button @click="getDataList(1)">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="dataList"
                border
                height="500"
                v-loading="dataListLoading"

                style="width: 100%;">

            <el-table-column
                    type="index"
                    label="序号"
                    header-align="center"
                    align="center"
                    width="50">
            </el-table-column>
                    <el-table-column
                            prop="zhaoHuiBiaoTi"
                            header-align="center"
                            align="center"
                            label="召回标题">
                    </el-table-column>
                    <el-table-column
                            prop="neiRong"
                            header-align="center"
                            align="center"
                            label="内容">
                    </el-table-column>
                    <el-table-column
                            prop="laiYuan"
                            header-align="center"
                            align="center"
                            label="来源">
                    </el-table-column>
                    <el-table-column
                            prop="faBuShiJian"
                            header-align="center"
                            align="center"
                            label="发布时间">
                    </el-table-column>

<!--            <el-table-column
                    fixed="right"
                    header-align="center"
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small"
                               @click="infoHandle(scope.row.id)"><i class="el-icon-edit"></i>查看详情</el-button>
                </template>
            </el-table-column>-->
        </el-table>
        <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                :total="totalPage"
                layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <!-- 弹窗, 新增 / 修改 -->
        <el-dialog title="药材召回召回公告" :visible.sync="infoVisible">
            <div class="mod-config">
                <el-descriptions :column="2"  :colon="false" title="召回公告信息"  content-class-name="customConten" label-class-name="customelable">
                    <el-descriptions-item label="召回标题">{{this.infoList.zhaoHuiBiaoTi}}</el-descriptions-item>
                  <el-descriptions-item label="发布时间">{{this.infoList.faBuShiJian}}</el-descriptions-item>
                  <el-descriptions-item label="来源" span="3">{{this.infoList.laiYuan}}</el-descriptions-item>
                  <el-descriptions-item label="内容" span="3">{{this.infoList.neiRong}}</el-descriptions-item>
                </el-descriptions>

              <el-descriptions :column="2" v-if="xianShiMx" :colon="false" title="召回公告明细" content-class-name="customConten" label-class-name="customelable">
                <el-descriptions-item label="基地名称">{{this.mingXiInfoList.jiDiMingCheng}}</el-descriptions-item>
                <el-descriptions-item label="产品名称">{{this.mingXiInfoList.chanPinMingCheng}}</el-descriptions-item>
                <el-descriptions-item label="生产批号">{{this.mingXiInfoList.shengChanPiHao}}</el-descriptions-item>
                <el-descriptions-item label="召回时间">{{this.mingXiInfoList.zhaoHuiShiJian}}</el-descriptions-item>
                <el-descriptions-item label="召回原因">{{this.mingXiInfoList.zhaoHuiYuanYin}}</el-descriptions-item>
                <el-descriptions-item label="召回报告">
                  <el-button size="small" type="success" @click="handleDownload(mingXiInfoList.zhaoHuiBaoGao)" v-show="mingXiInfoList.zhaoHuiBaoGao!==''">查看文件</el-button>
                </el-descriptions-item>
                <el-descriptions-item label="溯源码">
                  <el-button size="small" type="success" @click="handleDownload(mingXiInfoList.suYuanMa)" v-show="mingXiInfoList.suYuanMa!==''">查看文件</el-button>
                </el-descriptions-item>
                <el-descriptions-item label="处理结果">{{this.mingXiInfoList.chuLiJieGuo}}</el-descriptions-item>
                <el-descriptions-item label="评估结果">{{this.mingXiInfoList.pingGuJieGuo}}</el-descriptions-item>
                <el-descriptions-item label="备注">{{this.mingXiInfoList.beiZhu}}</el-descriptions-item>
                <el-descriptions-item label="照片" span="3">
                  <el-image   style="width: 200px; height: 200px;padding-right: 10px;"
                              v-for="(item, index) of tuPianDes"
                              :key="index"
                              :src=item
                              :preview-src-list="getPreviewImgList(tuPianDes,index)">
                  </el-image>
                </el-descriptions-item>
              </el-descriptions>


            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="qxinfo()">取 消</el-button>
            </div>
        </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qxzk()">取 消</el-button>
      </div>
    </el-dialog>
</template>

<script>
    export default {
        data() {
            return {
              dialogVisible:false,
                dataForm: {
                                zhaoHuiBiaoTi:'',
                                neiRong:'',
                                laiYuan:'',
                                faBuShiJian:'',
                                guanLianYongHu:'',
                },
                dataSaveForm: {
                                zhaoHuiBiaoTi:'',
                                neiRong:'',
                                laiYuan:'',
                                faBuShiJian:'',
                                guanLianYongHu:'',
                },
                dataRule: {
                                zhaoHuiBiaoTi: [
                                {required: true, message: '不能为空', trigger: 'blur'}
                            ],
                                neiRong: [
                                {required: true, message: '不能为空', trigger: 'blur'}
                            ],
                                laiYuan: [
                                {required: true, message: '不能为空', trigger: 'blur'}
                            ],
                },
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,

                infoList:[],
                infoLoading: false,
                infoVisible: false,
              tuPianDes:[],
              mingXiInfoList:[],
              xianShiMx:false
            }
        },

        activated() {
          this.$nextTick(() => {
            this.$refs['dataFormRef'].resetFields();
          });
            // this.$refs['dataFormRef'].resetFields()
            this.getDataList()
        },
        methods: {
          qxzk(){
            this.$nextTick(() => {
              this.$refs['dataFormRef'].resetFields()})
            this.dialogVisible=false

          },
          init(){
            this.dialogVisible=true
            this.$nextTick(() => {
              this.$refs['dataFormRef'].resetFields();
            });


            this.getDataList()
          },
            getDataList(pageIndex) {
                if (pageIndex) {
                    this.pageIndex = pageIndex
                }
                this.dataListLoading = true
                this.$http({
                    url: this.$http.adornUrl('/api-trading/yaoCaiZhaoHui/yaoCaiZhaoHuiZhaoHuiGongGao/list'),
                        method: 'get',
            params: this.$http.adornParams({
                'page': this.pageIndex,
                        'limit': this.pageSize,
                'zhaoHuiBiaoTi': this.dataForm.zhaoHuiBiaoTi,
                'neiRong': this.dataForm.neiRong,
                'laiYuan': this.dataForm.laiYuan,
                'faBuShiJian': this.dataForm.faBuShiJian,
                'guanLianYongHu': this.dataForm.guanLianYongHu,
            })
            }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.dataList = data.data.records
                        this.totalPage = Number(data.data.total)
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
          handleDownload(wenJianId) {
            window.open(this.$http.adornUrl('/api-file/file/download/file?fileId=' + wenJianId))
          },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            },
            qx() {
                this.addOrUpdateVisible = false;

            },
            // 新增 / 修改
            addOrUpdateHandle(id) {
                this.addOrUpdateVisible = true;
                this.$nextTick(() => {
                    this.$refs['dataForm'].resetFields()
                    if (id) {
                        this.$http({
                    url: this.$http.adornUrl(`/api-trading/yaoCaiZhaoHui/yaoCaiZhaoHuiZhaoHuiGongGao/getById`),
                                method: 'get',
                                params: this.$http.adornParams({"id":id})
                    }).then(({data}) => {
                            if (data && data.code === 0) {
                                this.dataSaveForm.id = data.data.id
                                this.dataSaveForm.zhaoHuiBiaoTi = data.data.zhaoHuiBiaoTi;
                                this.dataSaveForm.neiRong = data.data.neiRong;
                                this.dataSaveForm.laiYuan = data.data.laiYuan;

                            }
                        })
                    }
                })

            },
            qxinfo() {
                this.infoVisible = false;

            },
            // 新增 / 修改
            infoHandle(id) {
                this.infoVisible = true;
                this.infoList=[];
                this.$http({
            url: this.$http.adornUrl(`/api-trading/yaoCaiZhaoHui/yaoCaiZhaoHuiZhaoHuiGongGao/getById`),
                        method: 'get',
                        params: this.$http.adornParams({"id":id})
            }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.infoList=data.data;
                    }
                    // ===

                  if(this.infoList.gongGaoMingXiId){
                    this.xianShiMx=true
                    this.mingXiInfoList=[];
                    this.tuPianDes=[];
                    this.$http({
                      url: this.$http.adornUrl(`/api-trading/yaoCaiZhaoHui/yaoCaiZhaoHuiZhaoHuiMingXi/getById`),
                      method: 'get',
                      params: this.$http.adornParams({"id":this.infoList.gongGaoMingXiId})
                    }).then(({data}) => {
                      if (data && data.code === 0) {
                        this.mingXiInfoList=data.data;
                        if(data.data.zhaoPian){
                          var tp= data.data.zhaoPian.split(",")
                          for (let i = 0; i <tp.length ; i++) {
                            this.tuPianDes.push(
                              this.$http.adornUrl('/api-file/file/download/file?fileId=' + tp[i])
                            )
                          }

                        }
                      }
                    })
                  }
                    // ===
                })




            },
            // 删除
            deleteHandle(id) {
                var ids = id ? [id] : this.dataListSelections.map(item => {
                    return item.id
                })
                this.$confirm(`确定要进行删除操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl('/api-trading/yaoCaiZhaoHui/yaoCaiZhaoHuiZhaoHuiGongGao/delByIds'),
                            method: 'post',
                            data: this.$http.adornData(ids, false)
                }).then(({data}) => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getDataList()
                                }
                            })
                        } else {
                        this.$message.error(data.msg)
                        }
                    })
                })
            },
          getPreviewImgList:function(imgList,index) {
            let arr = []
            let i = 0;
            for(i;i < imgList.length;i++){
              arr.push(imgList[i+index])
              if(i+index >= imgList-1){
                index = 0-(i+1);
              }
            }
            return arr;
          },
            // 表单提交
            dataFormSubmit() {
            this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        this.$http({
                    url: this.$http.adornUrl(`/api-trading/yaoCaiZhaoHui/yaoCaiZhaoHuiZhaoHuiGongGao/save`),
                                method: 'post',
                    data: this.$http.adornData({
                    'id': this.dataSaveForm.id || undefined,
                        'zhaoHuiBiaoTi': this.dataSaveForm.zhaoHuiBiaoTi,
                        'neiRong': this.dataSaveForm.neiRong,
                        'laiYuan': this.dataSaveForm.laiYuan,
                    })
                    }).then(({data}) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {
                                        this.addOrUpdateVisible = false
                                        this.getDataList()
                                    }
                                })
                            } else {
                            this.$message.error(data.msg)
                            }
                        })
                    }
                })


            },
        }
    }
</script>
<style>
.customConten {
  color: rgb(19 35 29)
}

.customelable {
  color: rgb(19 35 29 / 77%);
  text-align: right;
  width: 120px;
  background-color: #10592a0d;
  font-weight: bold
}
</style>
